<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <style>

            * {
                margin: 0px;
                padding: 0px;
            }
            #images {
                width: 1240px;
                height: 500px;

                margin: 20px auto;
            }

            #images  .image-item {
                float: left;

                width: 400px;

                margin-right: 20px;

                position: relative;
            }
            #images  .image-item:last-child {
                margin-right: 0px;
            }

            #images .image-item img {
                width: 100%;
            }

            #images .image-item .image-text {
                width: 100%;
                padding: 8px 0px;
                background-color:  rgba(128,128,128, 0.5);
                color: #fff;
                position: absolute;
                text-indent:16px;
                bottom: 3px;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="images">

        </div>
    </body>

    <script>
        // dom 元素的节点属性 innerHTML

        // 存在一个对象数组
        var arr = [
            {
                url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg',
                title: '第一张图片'
            },
            {
                url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b30177d629bfbe2fb42251c1b8538f7b.jpg',
                title: '第二张图片'
            },
            {
                url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png',
                title: '第三张图片'
            }
        ]

        // 获取列表的 dom 节点
        var imagesDiv = document.querySelector('#images');
        // 遍历数组，依次将数组的每一项添加到节点内部
        for (var i = 0; i < arr.length; i++) {
            // = 和 += 是存在区别
            // <img src="xxxxxx">
            var item = arr[i];
            cosole.log(item);
            imagesDiv.innerHTML += '<div class="image-item"><img src="' + item.url + '"><div class="image-text">' + item.title + '</div></div>'
        }

        // 数组的映射map

        var newArr = arr.map(function(item, index) {
            return '<div class="image-item"><img src="' + item.url + '"><div class="image-text">' + item.title + '</div></div>'
        })


        imagesDiv.innerHTML = newArr.join('');
    </script>
</html>